<template>
  <div class="c-content">
    <div class="c-content-top">
      <div class="c-card-left">
        <div class="c-card-title car_title">公告</div>
        <div class="c-text-pub" v-for="(item, index) in messageList" :key="index">
          <div class="c-text-label text_01">[{{item.type}}]</div>
          <div class="c-message-label text_01">{{item.text}}</div>
        </div>

      </div>
      <!-- <div class="c-card-right">
        <div class="message-icon"></div>
      </div> -->
    </div>
    <div class="c-text-duo">
      <div class="more-style">更多</div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      messageList: [
        { type: '其他', text: '9月19日ZDNS域名注册局系统维护公告' },
        { type: '升级', text: '9月28日云监控EIP部分指标调整通知' },
        { type: '升级', text: '10月9日视觉智能开放平台接口升级' },
        { type: '升级', text: '9月23日远舢云新加坡节点升级计划通知' },
        { type: '其他', text: '9月26日.COM/.NET域名注册局系统维护公告' },

      ]
    }
  }
}
</script>

<style lang="less" scoped>
.c-content {
  width: 100%;
  height: 100%;
  padding: 16px;
  .c-content-top {
    display: flex;
  }
  .c-card-left {
    width: 90%;
    height: 100%;
    // float: left;
    padding-right: 50px;
    .c-card-title {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .c-text-pub {
      width: 100%;
      height: 40px;
      display: flex;
      font-size: 14px;

      font-family: PingFang SC;
      font-weight: 400;
      line-height: 47px;
      color: #405580;
      padding-left: 4px;
      div {
        display: inline-block;
        white-space: nowrap;
      }
      .c-text-label {
        font-weight: 600;
        margin-right: 8px;
      }
    }
  }
  .c-card-right {
    width: 10%;
    height: 100%;
    float: right;
    .message-icon {
      width: 66px;
      height: 66px;
      float: right;
      background: url('../../../assets/images/message.png') center no-repeat;
      background-size: 100% 100%;
    }
  }
  .c-text-duo {
      display: flex;
      justify-content: flex-end;
    .more-style {
    //   width: 100px;
      color: #0061ff;
      cursor: pointer;
    }
  }
}
</style>
